<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div style="text-align: center;">

   <!-- 1 -->
        <div id="app">
            <fieldset>
                <legend>个人计算共工资</legend>
                <p>
                    基本工资
                    <input type="text" v-model="base">
                </p>
                <p>
                    岗位工资
                    <input type="text" v-model="job">
                </p>
                <p>
                月度奖金
                    <input type="text" v-model="month">
                </p>
                <p>
                   综合补贴
                    <input type="text" v-model="all">
                </p>
                <p>
                   扣款工资
                    <input type="text" v-model="sub">
                </p>
                <p>应发工资:{{parseInt(base)+parseInt(job)+parseInt(month)+parseInt(all)-parseInt(sub)}}</p>
            </fieldset>
        </div>
        <script>
                new  Vue({
                    el:"#app",
                    data : {
                        base:1000,
                        job:1000,
                        month:1000,
                        all:1000,
                       sub:1000,
                    }
                   
                })
        </script>


<!-- 2 -->
<div id="app1">
    <p>{{text}}</p>
    <p v-once>{{text}}</p>
    <p v-text="text"></p>
    <p><input type="text" v-model="text"></p>
</div>
<script>
    new Vue({

        el:"#app1",
        data :{
            text:"哈喽i"
        }
    })

</script>

<!-- 3 -->
<div id="app3">
    <div v-bind:class="{banner:iscolor,Border:border,BackgroundColor:backgroundcolor}">
                    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <input type="checkbox" v-model="iscolor">
    <input type="checkbox" v-model="border">
    <input type="checkbox" v-model="backgroundcolor">
</div>

<script>
    new Vue({
        el:"#app3",
        data:{
            iscolor:true,
            border:true,
            backgroundcolor:true
        }
    })
</script>
<style>
    .banner{
        color:teal;
       
        font-size: 40px;
    }
    .Border{
        border:5px solid red; 
    }
    .BackgroundColor{
        
        background-color:cornflowerblue;
    }
</style>


<!-- 4 -->
<div id="images">
<img v-bind:src="url" v-bind:style="Style">
<h1>
    哈哈哈哈哈哈哈哈哈哈
</h1>
</div>
<script>
    new Vue({

            el:"#images",
            data:{
                url:"image/1.png",
                Style:{
                    width:"500px",
                    border:"4px solid cornflowerblue",
                    "border-radius":"30%"
                }
            }
    })
</script>

<div id="lun" >
    <img v-bind:src="url" v-bind:style="Style">

</div>
<script>
    new Vue({
        el:"#lun",
        data:{
            info:["image/1.png","image/2.png","image/3.png"],
            index:0,
            url:null,
            Style:{
                    width:"500px",
                    height:"500px",
                    border:"4px solid cornflowerblue",
                   
                }
        },
        created () {
            this.url=this.info[0];
        },
        mounted () {
            var _this=this;
            setInterval(() => {
                if(_this.index!=_this.info.length-1){
                 _this.index++;
                }
                else{
                    _this.index=0;
                }
                _this.url=_this.info[_this.index]
            }, 1000);
        }
    })
</script>
</div>
</body>
</html>